<template>
	<view scroll-y class="step-result-wrapper">
		<custom-header-bar backStatus="1" :bg='headerBg' title="运动结果"></custom-header-bar>
		<div class="info-wrapper" :style="stepBgStyle[stepLevel]">
			<div class="data-info">
				<div class="title">
					<div class="item">
						<image class="image" mode="aspectFit" src="/static/icon-clock-white.png"></image>
						<div class="text">{{new Date()|FormatDate('YYYY-MM-DD')}}</div>
					</div>
				</div>
			</div>
			<div class="chart-box">
				<div class="center" :class="stepLevel">
					<div class="step">
						<span class="num">{{stepresult.step||'--'}}</span>
						<span class="danwei">步</span>
					</div>
					<div class="text">{{stepresult.juli||'--'}}公里 {{stepresult.kcal||'--'}}千卡</div>
					<div class="time">{{stepresult.time||'--'}}</div>
				</div>
				<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
			</div>
			<div class="tip s" v-if="stepLevel==='s'" :class="stepLevel">今天运动量有点少，加强锻炼吧~</div>
			<div class="tip m" v-if="stepLevel==='m'" :class="stepLevel">今天运动量还可以，继续保持哦~</div>
			<div class="tip l" v-if="stepLevel==='l'" :class="stepLevel">恭喜您获得运动健将称号~</div>
		</div>
		<div class="result-data">
			<div class="tongji-data-item">
				<image class="menu" src="/static/menu-xinlv.png" mode="aspectFit"></image>
				<div class="name">心率</div>
				<div class="data">
					<div class="num">{{BlueBodyInfo.xinlv||'--'}}次/分</div>
				</div>
			</div>
			<div class="tongji-data-item">
				<image class="menu" src="/static/menu-xueya.png" mode="aspectFit"></image>
				<div class="name">血压</div>
				<div class="data">
					<div class="num">{{BlueBodyInfo.gaoya||'--'}}/{{BlueBodyInfo.diya||'--'}}mmHg</div>
				</div>
			</div>
			<div class="tongji-data-item">
				<image class="menu" src="/static/menu-xueyang.png" mode="aspectFit"></image>
				<div class="name">血氧</div>
				<div class="data">
					<div class="num">{{BlueBodyInfo.xueyang||'--'}}%</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		perwarnStep
	} from "@/api/message.js"
	import CustomHeaderBar from "@/components/custom-header-bar.vue"
	const StepResult = {
		s: {
			bg: '#5cb1ff',
			chartCircleBg: '#57a9fb',
			chartCircle: '#82c4fd',
			chartCenter: '#3596f1',
			chartText: ''
		},
		m: {
			bg: '#80d7ce',
			chartCircleBg: '#60d2cb',
			chartCircle: '#a2f3eb',
			chartCenter: '#67d2ca',
			chartText: ''
		},
		l: {
			bg: '#77d482',
			chartCircleBg: '#5ad169',
			chartCircle: '#75f883',
			chartCenter: '#65cf57',
			chartText: ''
		}
	}
	export default {
		data() {
			return {
				stepresult: {},
				stepLevel: 's',
				stepBgStyle: {
					's': {
						backgroundImage: `url(${this.PictureUrl}bg-step-result-1.png)`
					},
					'm': {
						backgroundImage: `url(${this.PictureUrl}bg-step-result-2.png)`
					},
					'l': {
						backgroundImage: `url(${this.pictureUrl}bg-step-result-3.png)`
					},
				},
				headerBg: 'transparent',
				chartData: {},
				opts: {
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				}
			}
		},
		onLoad(options) {
			this.stepresult = options
			this.headerBg = StepResult[this.stepLevel].bg
			this.chartData.series = [{
				color: StepResult[this.stepLevel].chartCircle,
				data: 0.8
			}]
			this.opts.extra.arcbar.backgroundColor = StepResult[this.stepLevel].chartCircleBg
			this.stepBgStyle = {
				's': {
					backgroundImage: `url(${this.PictureUrl}bg-step-result-1.png)`
				},
				'm': {
					backgroundImage: `url(${this.PictureUrl}bg-step-result-2.png)`
				},
				'l': {
					backgroundImage: `url(${this.pictureUrl}bg-step-result-3.png)`
				},
			}

			let step = this.stepresult.step
			let middle = 3000
			let small = 3000 * 0.9
			let large = 3000 * 1.1
			let smallS = 3000 * 0.8
			let largeL = 3000 * 1.2
			if (step > small && step < large) {
				this.stepLevel = 'm'
			} else if (step <= small) {
				this.stepLevel = 's'
			} else if (step >= large) {
				this.stepLevel = 'l'
			}
			perwarnStep({
				...options,
				deviceId: this.CurrentLinkDevice.deviceId
			}).then(() => {

			})
		},
		computed: {
			...mapGetters(['PictureUrl', 'BlueBodyInfo', 'CurrentLinkDevice'])
		},
		components: {
			CustomHeaderBar
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.step-result-wrapper {
		background-color: #F4F4F4FF;

		.info-wrapper {
			background-size: cover;
			padding-top: 160upx;

			.data-info {
				padding: 24upx;

				.title {
					padding: 0 24upx;
					display: flex;
					justify-content: space-between;

					.item {
						display: flex;
						align-items: center;

						.image {
							width: 36upx;
							margin-right: 8upx;
						}

						.text {
							color: #ffffff;
							font-size: 32upx;
						}
					}
				}
			}

			.chart-box {
				position: relative;
				margin-top: 40upx;
				height: 420upx;

				.center {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 300upx;
					height: 300upx;
					border-radius: 300upx;
					display: flex;
					color: #ffffff;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.step {
						.num {
							font-size: 60upx;
							display: inline-block;
							margin-right: 8upx;
						}

						.danwei {
							font-size: 32upx;
						}
					}

					.text {
						margin-top: 12upx;
						font-size: 32upx;
					}

					.time {
						margin-top: 32upx;
					}

					&.s {
						background-color: #3596f1;

						.text {
							color: #ABD7FFFF;
						}

						.time {
							color: #ABD7FFFF
						}
					}

					&.m {
						background-color: #67d2ca;

						.text {
							color: #45FFECFF;
						}

						.time {
							color: #067569FF
						}
					}

					&.l {
						background-color: #65cf57;

						.text {
							color: #A2FF93FF;
						}

						.time {
							color: #1F8C0EFF
						}
					}
				}
			}

			.tip {
				padding: 100upx 0 48upx;
				font-size: 34upx;
				text-align: center;

				&.s {
					color: #3189DB;
				}

				&.m {
					color: #27958EFF;
				}

				&.l {
					color: #1F8C0EFF;
				}
			}
		}

		.result-data {
			padding: 0 24upx 48upx 24upx;

			.tongji-data-item {
				margin: 24upx 0;
				padding: 0 40upx;
				display: flex;
				height: 180upx;
				align-items: center;
				background-color: #ffffff;
				border-radius: 30upx;

				.menu {
					margin-right: 24upx;
					width: 72upx;
					height: 72upx;
				}

				.name {
					color: #000000D9;
					font-size: 48upx;

				}

				.data {
					flex: 1;
					text-align: right;

					.num {
						color: #000000CC;
						font-size: 32upx;
					}
				}
			}
		}
	}
</style>
